@import "../../../../src/common.scss";

:host {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.svg-custom-wrapper {
    width: 100%;
    display: block;
    height: 100%;
}   

.svg-wrapper {
    width: 100%;
    display: block;
    height: 100%;
    cursor: all-scroll;

    ::ng-deep {
        .edgePath {
            path {
                stroke: $polar_grey_3;

                &.highlight {
                    stroke: $polar_grey_0 !important;
                }

                :host-context(.night) & {
                    stroke: $darkTheme_grey_5;

                    &.highlight {
                        stroke: white !important;
                    }
                }
            }

            &.color-success path {
                stroke: $cds_color_green;
            }

            &.color-fail path {
                stroke: $cds_color_red;
            }

            &.color-inactive path {
                stroke: grey;
            }

            :host-context(.night) & {
                &.color-success path {
                    stroke: $darkTheme_green;
                }

                &.color-fail path {
                    stroke: $darkTheme_red;
                }

                &.color-inactive path {
                    stroke: grey;
                }
            }
        }
    }
}

.controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;

    button {
        background-color: #fff;

        :host-context(.night) & {
            background-color: #141414;
        }
    }

    button:not(:last-child) {
        margin-right: 10px;
    }
}

.hooks {
    bottom: 20px;
    left: 20px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: start;
    cursor: pointer;

    .hook {
        background-color: white;
        border: 2px solid grey;
        color: $polar_grey_1;
        width: auto;
        border-radius: 15px;
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 10px;

        [nz-icon] {
            font-size: 18px;
            margin-right: 5px;
        }

        &:not(:first-child) {
            margin-top: 10px;
        }

        :host-context(.night) & {
            background-color: $darkTheme_grey_1;
            color: $darkTheme_grey_6;
        }

        &.active {
            border-color: $cds_color_green;
            background-color: $cds_color_light_green;

            :host-context(.night) & {
                border-color: $darkTheme_green;
                background-color: $darkTheme_night_green;
            }
        }
    }

    .hook:hover {
        border-color: black;

        :host-context(.night) & {
            border-color: white;
        }
    }
}